<template>
    <div class="materialManage knowledge-container">
        <div class="treeContent">
            <div class="header">
                <span>素材类目</span>
            </div>
            <knowledgeTree @getClassId="getClassId" :optionList.sync="optionList" type="material"></knowledgeTree>
        </div>
        <div class="container calcwidth">
            <el-tabs v-model="activeName">
                <el-tab-pane label="图文" name="graphics" v-if="menuAuthCodes.includes('M61')"></el-tab-pane>
                <el-tab-pane label="图片" name="picture" v-if="menuAuthCodes.includes('M60')"></el-tab-pane>
                <el-tab-pane label="语音" name="voice" v-if="menuAuthCodes.includes('M62')"></el-tab-pane>
                <el-tab-pane label="视频" name="video" v-if="menuAuthCodes.includes('M63')"></el-tab-pane>
                <el-tab-pane label="文件" name="file" v-if="menuAuthCodes.includes('M64')"></el-tab-pane>
            </el-tabs>
            <component :is="componentName" :materialType="materialType" :classId="treeId" :classList="optionList" class="materialCom">
            </component>
        </div>
    </div>
</template>

<script>
import knowledgeTree from "@/components/knowledgeTree";
import graphics from "./graphics.vue"
import materialFile from "./materialFile.vue";
import blank from "@/components/Blank";
export default {
    name: "materialManage",
    data() {
        return {
            activeName: "graphics",
            materialType: "",
            treeId: "0",
            optionList: [],
        }
    },
    created() {
        if (this.menuAuthCodes.includes('M61')) {
            this.activeName = "graphics";
        } else if (this.menuAuthCodes.includes('M60')) {
            this.activeName = "picture";
        } else if (this.menuAuthCodes.includes('M62')) {
            this.activeName = "voice";
        } else if (this.menuAuthCodes.includes('M63')) {
            this.activeName = "video";
        } else if (this.menuAuthCodes.includes('M64')) {
            this.activeName = "file";
        } else {
            this.activeName = "blank";
        }
    },
    methods: {
        getClassId(classId) {
            this.treeId = classId;
        },
    },
    computed: {
        componentName() {
            var name = ["picture", "voice", "video", "file"];
            if (this.activeName == "graphics") {
                return this.activeName;
            } else if (name.includes(this.activeName)) {
                this.materialType = this.activeName;
                return "materialFile";
            } else {
                return "blank";
            }
        },
    },
    components: {
        knowledgeTree,
        graphics,
        materialFile,
        blank
    }
}
</script>

<style lang="scss">
.materialManage {
    height: 100%;
    overflow: hidden;
    .container {
        padding-right: 0;
        padding-bottom: 0;
        position: relative;
    }
    .materialCom {
        height: calc(100% - 55px);
    }
}
</style>